<template>
  <div>
    <div class="doc-box">
      <div class="main-box">
        <div class="doc-title">
          <p class="top"><i class="iconfont icon-remen3"></i> 最新文档</p>
          <p class="bottom">平台精选文档，满足您的需求</p>
        </div>
        <div class="doc-box">
          <div class="item-list">
            <div class="item" v-for="(item,index) in data" :key="index" v-routers="{path:'/zt',query:{uid:item.id}}">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-xinpin1"/>
                    {{ item.title }}
<!--                    <b class="iconfont icon-xinpin3"></b>-->
                  </a>
                </p>
              </div>
              <div class="info over-hide-2">
                {{removeHtmlTags(item.introduction)}}
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">{{ item.category }}</div>
                  <div class="page">{{ item.pages }}页</div>
                </div>
                <div class="right">
                  <span>上传时间：{{ item.createTime.slice(0,10) }}</span>
                  <span>作者：标小清</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="doc-box" v-if="false">
      <div class="main-box">
        <div class="doc-title">
          <p class="top"><i class="iconfont icon-remen3"></i> 免费文档</p>
          <p class="bottom">平台精选文档，满足您的需求</p>
        </div>
        <div class="doc-box">
          <div class="item-list">
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>
                    学校食堂餐饮服务投标方案（技术标 1002页）
                    <b class="iconfont icon-xinpin3"></b>
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-titles"></div>
              <div class="title-item">
                <p class="over-hide-1">
                  <a href="javascript:void (0)">
                    <i class="iconfont icon-remen2"/>学校食堂餐饮服务投标方案（技术标 1002页）
                  </a>
                </p>
              </div>
              <div class="item-content">
                <div class="left">
                  <div class="tips">投标方案</div>
                  <div class="page">127页</div>
                </div>
                <div class="right">
                  <span>上传时间：2024-06-09</span>
                  <span>作者：9969 用户</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>


import {removeHtmlTags} from "../../../utils";

export default {
  methods: {removeHtmlTags},
  props:['data'],
  mounted() {

  }
}
</script>
<style scoped lang="scss">
.doc-box{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 0 20px 0;
  background: #fff;
  .main-box{
    width: 1300px;
    .doc-title{
      width: 1300px;
      height: 100px;
      padding: 40px 0 0 0;
      box-sizing: border-box;

      .top{
        width: 100%;
        font-size: 24px;
        i{
          font-size: 24px;
          margin-right: 8px;
        }
      }
      .bottom{
        font-size: 12px;
        margin-top: 6px;
        color: #999;
      }
    }
    .doc-box{

      width: 1300px;
      min-height: 150px;
      .item-list{
        width: 100%;
        min-height: 560px;
        margin-top: 30px;
        border-radius: 10px;
        background: #fff;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        padding:35px 2%;
        box-sizing: border-box;
        column-count: 2; /* 分成两栏 */
        column-gap: 10px; /* 栏之间的间距 */
        .item{
          width: 100%;
          height: 120px;
          border-bottom: 1px #dfdada dashed;
          margin-bottom: 20px;
          position: relative;
          .item-titles{
            display: none;
            width: 100%;
            height: 120px;
            z-index: 0;
            position: absolute;
          }
          .title-item{
            width: 100%;
            position: relative;
            z-index: 9;
            height: 40px;
            p{
              font-size: 18px;
              color: #232C3A;
              a{
                color: #232C3A;
                b{
                  z-index: 0;
                  position: absolute;
                  font-size: 25px;
                  margin-left: 10px;
                }
              }
              a:hover{
                color: #DC2E2B;
              }
              i{
                font-size: 24px;
                margin-right: 10px;
              }
            }
          }
          .info{
            font-size: 12px;
            color: #999;
            padding: 0 0 0 40px;
            margin-bottom: 10px;
            box-sizing: border-box;
          }
          .item-content{
            width: 100%;
            padding: 0 30px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 9;
            .left{
              width: 50%;
              display: flex;
              align-items: center;
              .tips{
                width: 80px;
                height: 20px;
                font-size: 12px;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              }
              .page{
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                height: 20px;
                padding: 0 10px;
                background:#30b53e;
                font-size: 12px;
                border-radius: 5px;
                margin-left: 10px;
                i{
                  color: #fff !important;
                }
              }
            }
            .right{
              width: 50%;
              display: flex;
              justify-content: right;
              span{
                font-size: 13px;
                color:#bbb6b6;
                margin-left: 10px;
              }
            }

          }
        }
        .item:hover{
          box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
          padding: 5px;
          border: none;
          border-radius: 10px;
          box-sizing: border-box;
          transition: 0.8s;
          .title-item{
            p{
              a{
                color: #333;
                font-weight: 600;

              }
            }
          }

          .item-content{
            .right{
              span{
                color: #999;
              }
            }
          }

          //.info{
          //  color: #666;
          //  font-weight: 600;
          //}
          .item-titles{
            display: block;
            animation: linear 0.4s toLength;
          }
        }
      }
    }
  }

  @keyframes toLength {
    0%{
      width: 0;
    }
    50%{
      width: 50%;
    }
    100%{
      width: 100%;
    }
  }
}
</style>